<template>
  <div class="row"> <!-- row -->
    <div class="inline-block" style="width: 50px; margin-right: 10px;"> <!-- position adjustment button -->
      <div class="button-container"> <!-- up button -->
        <el-button class="arrow" icon="el-icon-arrow-up" plain type="success" @click="up"></el-button>
      </div>
      <div class="button-container"> <!-- down button -->
        <el-button class="arrow" icon="el-icon-arrow-down" plain type="success" @click="down"></el-button>
      </div>
    </div>
    <div class="inline-block" style="width: 70px; margin-right: 10px;"> <!-- score input -->
      <el-input v-model="item.score" style="vertical-align: bottom" @input="change"></el-input>
    </div>
    <div class="inline-block" style="flex: 1; margin-right: 10px;"> <!-- describe input -->
      <KindEditor placeholder="请输入选项内容" :content.sync="item.describe" editor-type="Textarea" :height="35"/>
    </div>
    <div class="inline-block" style="width: 40px;"> <!-- add/delete button -->
      <el-button v-if="item.id === 0" circle icon="el-icon-plus" plain style="vertical-align: bottom" type="success"
                 @click="addItem"></el-button>
      <el-button v-else circle icon="el-icon-minus" plain style="vertical-align: bottom" type="danger"
                 @click="deleteItem"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "QuestionItem",
  props: ["value", 'idx'],
  data() {
    return {
      item: {
        id: 0,
        score: 0,
        describe: ""
      }
    }
  },
  methods: {
    up() {
      this.$emit("up", this.idx)
    },
    down() {
      this.$emit("down", this.idx)
    },
    change() {
      this.$emit("input", this.item)
    },
    addItem() {
      this.$emit("add-item")
    },
    deleteItem() {
      this.$emit("delete-item", this.idx)
    }
  },
  created() {
    this.item = this.value
  }
}
</script>

<style scoped>
.button-container {
  height: 20px;
  line-height: 20px;
}

.row {
  display: flex;
  margin: 5px;
}

.arrow {
  height: 20px;
  width: 50px;
  padding: 0;
}
</style>
